<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>首页</title>
    <script>
        var requireExtraPaths = {
            extrance: '../../../master_js/report/homeTransitWhole'
        };
        var cssFileLoadArr = ['/content/css/sub/homePage.css'];
    </script>
    <jsp:include flush="true" page="../../base/base.jsp"></jsp:include>
</head>
<body class="site-body overflow-a">
<a class="page-print-btn" onclick="window.print();"></a>

<div class="index-content">
    <div class="time-select-fixed" style="width: 100%;">
        <div class="time-select-bar ct-shadow clearfix">
            <div class="line-select">
                <span class="text">线路选择</span>
                <span id="showlineName"></span>

                <div class="line-wrap">
                    <input type="text" class="search-input" id="lineSelected">

                    <div class="tree-box">
                        <ul id="lineTree" class="ztree line-dropdown"></ul>
                    </div>
                </div>
            </div>
            <div class="time-select time-select2  ml0" id="dateDiv">
                <a class="active" val="02">昨天</a>
                <a val="03">近7天</a>
                <a val="04">本月</a>
                <a val="05">上月</a>
                <a val="06">今年</a>
                <a val="07">去年</a>
            </div>
        </div>
    </div>
    <div class="blank-65"></div>
    <div class="ct-grid-3 clearfix mt20">
        <div class="col-sub">
            <div class="inner-box">
                <div class="ct-shadow">
                    <h2 class="title">平台概况</h2>

                    <div id="totalStatus" style="height: 300px;;width: 300px;margin: 0 auto;"></div>
                </div>
            </div>
        </div>
        <div class="col-main">
            <div class="inner-box">
                <div class="ct-shadow">
                    <ul class="platform-info">
                        <li class="li-1">
                            车辆总数
                            <span id="totalCars">0<i>辆</i></span>
                        </li>
                        <li class="li-2">
                            运营车辆
                            <span id="motionCars">0<i>辆</i></span>
                        </li>
                        <li class="li-3">
                            行驶里程
                            <span id="driveMiles">0<i>KM</i></span>
                        </li>
                        <li class="li-4">
                            油平均能耗
                            <span id="avgOilConsum">0<i>L</i></span>
                        </li>
                        <li class="li-5">
                            电平均能耗
                            <span id="avgElecConsum">0<i>KW</i></span>
                        </li>
                        <li class="li-6">
                            气平均能耗
                            <span id="avgGasConsum">0<i>L</i></span>
                        </li>
                        <li class="li-7">
                            故障异常总数
                            <span id="mostSeriousFaultsCount">0<i>次</i></span>
                        </li>
                        <li class="li-8">
                            故障车辆总数
                            <span id="mostSeriousCarsCount">0<i>辆</i></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-extra task-box">
            <div class="inner-box">
                <div class="ct-shadow">
                    <h2 class="title">今日待办事项</h2>

                    <div class="clearfix">
                        <div class="item">
                            <div class="item-box">
                                <a id="itemFaultDetail">
                                    <div class="item-inner item-inner1" id="FAULT_COUNT">
                                        <h4>0</h4>

                                        <p>车辆故障</p>
                                        <span class="icon"></span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-box">
                                <a id="itemBhvDetail">
                                    <div class="item-inner item-inner2" id="BHV_COUNT">
                                        <h4>0</h4>

                                        <p>行为异常</p>
                                        <span class="icon"></span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="item">
                            <div class="item-box">
                                <a id="itemOverspeed">
                                    <div class="item-inner item-inner3" id="ENER_EXCPT_VAL">
                                        <h4>0</h4>

                                        <p>超速次数</p>
                                        <span class="icon"></span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-box">
                                <a id="itemMaintExpr">
                                    <div class="item-inner item-inner4" id="MAINT_EXPIRE">
                                        <h4>0</h4>

                                        <p>维保到期</p>
                                        <span class="icon"></span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="index-title" style="page-break-before: always;">
        <img src="../../content/images/index-title-bg_14.jpg" width="1304" height="95" border="0" alt="">
        <span class="icon-anquan"></span>
    </div>

    <div class="data-num clearfix">
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="seriousFault">
                        <h4>严重故障数（次）</h4>

                        <p id="seriousFaults">0</p>
                        <span id="seriousFaultsPer" style="font-size: 13px;"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="normalFault">
                        <h4>一般故障数（次）</h4>

                        <p id="commonFaults">0</p>
                        <span id="commonFaultsPer" style="font-size: 13px;"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="faultVehicles">
                        <h4>故障车辆数（辆）</h4>

                        <p id="FaultCars">0</p>
                        <span id="FaultCarsPer" style="font-size: 13px;"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="unsafeBhvMore">
                        <h4>不良行为数（次）</h4>

                        <p id="unsafeBhvs">0</p>
                        <span id="unsafeBhvsPer" style="font-size: 13px;"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="unsafeBhvDrvsMore">
                        <h4>不良行为驾驶员数（人）</h4>

                        <p id="unsafeBhvDrvs">0</p>
                        <span id="unsafeBhvDrvsPer" style="font-size: 13px;"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="ct-grid-2 clearfix mt20">
        <div class="col-sub">
            <div class="inner-box">
                <div class="ct-shadow">
                    <div class="title-bar">
                        <a class="more" id="faultsChartMore">详细信息</a>车辆故障趋势图
                    </div>
                    <div class="chart-box">
                        <div id="faultsTendencyChart" class="chart-item-box" style="width: 500px;margin: 0 auto;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-extra">
            <div class="inner-box">
                <div class="ct-shadow">
                    <div class="title-bar">
                        <a class="more" id="unsafeChartMore">详细信息</a>不安全行为趋势图
                    </div>
                    <div class="chart-box">
                        <div id="unsafeBhvTendencyChart" class="chart-item-box" style="width: 500px;margin: 0 auto;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="index-title" style="page-break-before: always;">
        <img src="../../content/images/index-title-bg_14.jpg" width="1304" height="95" border="0" alt="">
        <span class="icon-nenghao"></span>
    </div>

    <div class="data-num clearfix">
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="avgEnergyIndexMore">
                        <h4 id="energyIndexTitle">平均百公里油耗<i>（L）</i></h4>

                        <p id="avgEnergyIndex">0</p>
                        <span style="right: 45px; font-size: 13px;" id="avgEnergyIndexPer"></span>
                    </a>

                    <div class="item-panel">
                        <a class="active" id="changeOilIndex">油</a>
                        <a id="changeElecIndex">电</a>
                        <a id="changeGasIndex">气</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="avgEnergyCostMore">
                        <h4 id="costIndexTtile">平均百公里油耗费用(元)</h4>

                        <p id="avgEnergyCost">0</p>
						<span id="avgEnergyCostPer" style="font-size: 13px;">
						</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="energyMileMore">
                        <h4>运行里程（KM）</h4>

                        <p id="energyException">0</p>
						<span id="energyExceptionPer" style="font-size: 13px;">
						</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <a id="energyDurationMore">
                        <h4>运行时长（小时）</h4>

                        <p id="energyExceptionCars">0</p>
						<span id="energyExceptionCarsPer" style="font-size: 13px;">
						</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <div class="ct-shadow">
                    <h5>影响能耗的因素（前三名）</h5>

                    <div class="clearfix">
                        <div class="inner">
                            <span class="flag"></span>
                            <ul id="energyDriversFactors">
                            </ul>
                        </div>
                        <div class="inner">
                            <span class="flag flag2"></span>
                            <ul class="no-bd" id="energyCarsFactors">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ct-energe ct-shadow">
        <div class="title-bar">
            整体能耗趋势图
        </div>
        <div class="clearfix">
            <div class="chart-item">
                <div id="oilTendencyChart" class="chart-item-box" style="width: 320px;margin: 0 auto;"></div>

            </div>
            <div class="chart-item">
                <div id="elecTendencyChart" class="chart-item-box" style="width: 320px;margin: 0 auto;"></div>

            </div>
            <div class="chart-item">
                <div id="gasTendencyChart" class="chart-item-box" style="width: 320px;margin: 0 auto;"></div>

            </div>
        </div>
        <div class="clearfix" style="page-break-before: always;">
            <div class="chart-item">
                <div class="table-wrap">
                    <div class="table-bar clearfix">
                        <a class="more" id="oilRankMore">更多</a>
								<span class="radio-box">
									<input type="radio" name="changeOilRanking" checked="checked" value="0">
									<span class="radio-text">按车辆</span>
								</span>
								<span class="radio-box ml10">
									<input type="radio" name="changeOilRanking" value="1">
									<span class="radio-text">按驾驶员</span>
								</span>
                    </div>
                    <div id="carOilRankingDiv">
                        <table width="100%" class="table-style2" id="carOilRanking">
                        </table>
                    </div>
                    <div id="driverOilRankingDiv" style="display: none;">
                        <table width="100%" class="table-style2" id="driverOilRanking">
                        </table>
                    </div>
                </div>

            </div>
            <div class="chart-item">
                <div class="table-wrap">
                    <div class="table-bar clearfix">
                        <a class="more" id="elecRankMore">更多</a>
								<span class="radio-box">
									<input type="radio" name="changeElecRanking" checked="checked" value="0">
									<span class="radio-text">按车辆</span>
								</span>
								<span class="radio-box ml10">
									<input type="radio" name="changeElecRanking" value="1">
									<span class="radio-text">按驾驶员</span>
								</span>
                    </div>
                    <div id="carElecRankingDiv">
                        <table width="100%" class="table-style2" id="carElecRanking">
                        </table>
                    </div>
                    <div id="driverElecRankingDiv" style="display: none;">
                        <table width="100%" class="table-style2" id="driverElecRanking">
                        </table>
                    </div>
                </div>
            </div>
            <div class="chart-item">
                <div class="table-wrap">
                    <div class="table-bar clearfix">
                        <a class="more" id="gasRankMore">更多</a>
								<span class="radio-box">
									<input type="radio" name="changeGasRanking" checked="checked" value="0">
									<span class="radio-text">按车辆</span>
								</span>
								<span class="radio-box ml10">
									<input type="radio" name="changeGasRanking" value="1">
									<span class="radio-text">按驾驶员</span>
								</span>
                    </div>
                    <div id="carGasRankingDiv">
                        <table width="100%" class="table-style2" id="carGasRanking">
                        </table>
                    </div>
                    <div id="driverGasRankingDiv" style="display: none;">
                        <table width="100%" class="table-style2" id="driverGasRanking">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="index-title" style="page-break-before: always;">
        <img src="../../content/images/index-title-bg_14.jpg" width="1304" height="95" border="0" alt="">
        <span class="icon-jiwu"></span>
    </div>
    <div class="ct-grid-3 clearfix ct-jw mt20">
        <div class="col-main">
            <div class="inner-box">
                <div class="ct-shadow">
                    <h2 class="title">机务问题<span class="c-666">（前五名）</span></h2>
                    <ul class="jw-question" id="maintenanceMatter">
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sub">
            <div class="inner-box">
                <div class="ct-shadow ps-r">
                    <h2 class="title">体检报告<span class="c-666">（前五名）</span></h2>

                    <div class="table-wrap">
                        <table width="100%" id="examGrid">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-extra">
            <div class="inner-box">
                <div class="ct-shadow">
                    <h2 class="title">维保过期<span class="c-666">（即将到期的五辆车）</span></h2>

                    <div class="table-wrap">
                        <table width="100%" id="todoGrid">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blank-10"></div>
</div>
</body>
</html>